<template>
  <div class="admin-page-content">
    <div class="has-top-from-bottom">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="名称">
          <el-input placeholder="" v-model="query.name" clearable></el-input>
        </el-form-item>
        <el-form-item style="margin-left:30px;" label="类型">
          <el-select v-model="query.type">
            <el-option value="" label="所有类型"></el-option>
            <el-option :value="0" label="NAS"></el-option>
            <el-option :value="1" label="FTP"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item style="margin-left:30px;">
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="page-btn-box">
      <el-button type="primary" size="small" @click="AddServiceFileModal">新增文件服务器</el-button>
    </div>
     <el-table ref="multipleTable" size="small" :data="data" :border="true" tooltip-effect="dark" style="width: 100%;margin-top:30px;">
       <el-table-column label="名称" prop="name"></el-table-column>
       <el-table-column label="域名" prop="domain"></el-table-column>
       <el-table-column label="服务器" prop="host"></el-table-column>
       <el-table-column label="端口" prop="ftpPort"></el-table-column>
       <el-table-column label="存储目录" prop="baseDir"></el-table-column>
       <el-table-column label="用户名" prop="ftpUsername"></el-table-column>
       <el-table-column label="密码" prop="ftpPassword"></el-table-column>
       <el-table-column label="类型" prop="type">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type === 1" effect="dark" size="mini">FTP</el-tag>
            <el-tag v-if="scope.row.type === 0" effect="dark" size="mini" type="danger">NAS</el-tag>
          </template>
       </el-table-column>
       <el-table-column label="状态" prop="delFlag">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.delFlag === 1" effect="dark" size="mini" type="danger">已删除</el-tag>
            <el-tag v-if="scope.row.delFlag === 0" effect="dark" size="mini" type="success">正常</el-tag>
          </template>
       </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <template v-if="scope.row.delFlag !== 1">
              <el-tooltip class="tips-top" effect="dark" content="编辑" placement="top">
                <div class="icon-table edit-icon" @click="editUserInfo(scope.row)"></div>
              </el-tooltip>
              <el-tooltip class="tips-top" effect="dark" content="删除" placement="top">
              <div class="icon-table delete-icon" @click="deleteUser(scope.row)"></div>
            </el-tooltip>
            </template>
          </template>
        </el-table-column>
     </el-table>
     <div class="table-pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="query.pageNumber"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="query.pageSize"
        layout="sizes, prev, pager, next"
        :total="total">
      </el-pagination>
      <span class="span-pagination">共{{ Math.ceil(total/query.pageSize) }}页，{{total}}条数据</span>
    </div>
    <el-dialog :title="info.id ? '编辑' : '新增'" :visible.sync="modal">
      <div class="adduser-model">
         <el-form :model="info" :rules="rule" ref="ruleForm" label-width="100px" class="demo-ruleForm">
           <el-form-item prop="name" label="名称:">
             <el-input v-model="info.name" placeholder="请输入名称"></el-input>
           </el-form-item>
            <el-form-item prop="type" label="类型:">
             <el-select style="width:100%;" v-model="info.type">
               <el-option :value="0" label="NAS"></el-option>
               <el-option :value="1" label="FTP"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item prop="baseDir" label="存储目录:">
             <el-input v-model="info.baseDir" placeholder="请输入存储目录"></el-input>
           </el-form-item>
           <el-form-item prop="domain" label="域名:">
             <el-input v-model="info.domain" placeholder="请输入域名"></el-input>
           </el-form-item>
           <el-form-item prop="host" label="服务器地址:">
             <el-input v-model="info.host" placeholder="请输入服务器地址"></el-input>
           </el-form-item>
           <el-form-item prop="ftpPort" label="服务器端口:">
             <el-input type="number" v-model="info.ftpPort" placeholder="请输入服务器端口"></el-input>
           </el-form-item>
           <el-form-item prop="ftpUsername" label="用户名:">
             <el-input v-model="info.ftpUsername" placeholder="请输入服务器用户名"></el-input>
           </el-form-item>
           <el-form-item prop="ftpPassword" label="密码:">
             <el-input v-model="info.ftpPassword" placeholder="请输入服务器密码"></el-input>
           </el-form-item>
         </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" size="small" @click="showAddUserDa">取 消</el-button>
        <el-button type="primary" size="small" @click="submoitFrom('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import  { serviceFileList, addServiceFile, editServiceFile, getServiceFile, deleteServiceFile } from '@/api/admin/service-file'
import  { checkIpAddress, checkDomain } from '@/utils/validate'
var checkHost = (rule, value, callback) => {
  if (value === '') {
    callback(new Error("请输入文件服务器地址"));
  } else if(!checkIpAddress(value) || !checkDomain(value)) {
    callback(new Error('请输入正确的IP地址或域名地址'))
  } else {
    callback();
  }
}
export default {
  data() {
    return {
      query: {
        pageNumber:1,
        pageSize:10,
        name: '',
        type: ''
      },
      data: [],
      total: 0,
      modal: false,
      info:{
        name: '',
        type: '',
        baseDir: '',
        domain: '',
        host: '',
        ftpPort: '',
        ftpUsername: '',
        ftpPassword: ''
      },
      rule:{
        name:[{ required: true, message: '请输入文件服务器名称', trigger: 'blur' }],
        type:[{ required: true, message: '请选择文件服务器类型', trigger: 'change' }],
        baseDir:[{ required: true, message: '请输入文件服务器存储目录', trigger: 'blur' }],
        host:[{ required: true, validator: checkHost, trigger: "blur" }],
        // domain: [{ required: true, validator: checkHost, trigger: "blur" }],
        // ftpPort: [{ type: Number ,required: true, message: '请输入端口号', trigger: 'blur'}],
        // ftpUsername: [{required: true, message: '请输入文件服务器用户名', trigger: 'blur'}],
        // ftpPassword: [{required: true, message: '请输入文件服务器密码', trigger: 'blur'}],
      }
    }
  },
  mounted() {
    this.getServiceList()
  },
  methods: {
    deleteUser(item) {
      const vm = this;
       this.$confirm('您是否确定删除该文件服务器','删除提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        deleteServiceFile({id:item.id}).then((res)=>{
          if (res.code === '20000') {
              vm.$message.success('删除成功');
              vm.onSubmit()
            }
        })
      })
      .catch(()=>{
        this.$message({
          type: 'info',
          message: '已取消'
        });     
      })
    },
    editUserInfo(item) {
      const vm = this;
      let query = {
        id: item.id
      }
      getServiceFile(query).then((res) => {
        if(res.code === '20000') {
          vm.info = {
            id: res.data.id,
            name: res.data.name,
            type: res.data.type,
            baseDir: res.data.baseDir,
            domain: res.data.domain,
            host: res.data.host,
            ftpPort: res.data.ftpPort,
            ftpUsername: res.data.ftpUsername,
            ftpPassword: res.data.ftpPassword,
          }
          vm.modal = true
        }
      })
    },
    async submoitFrom(ruleFrom) {
      const vm = this;
      vm.$refs[ruleFrom].validate((valid) => {
        if(valid) {
          vm.submitFrom()
        }
      })
    },
    async submitFrom(){
      const vm = this;
      if (vm.info.id) {
            // 修改
            let responese = await editServiceFile(vm.info)
            if (responese.code === '20000') {
              vm.$message.success('修改成功');
              vm.showAddUserDa()
              vm.onSubmit()
            }
          } else {
            // 新增
            let responese = await addServiceFile(vm.info)
            if (responese.code === '20000') {
              vm.$message.success('新增成功');
              vm.showAddUserDa()
              vm.onSubmit()
            }
          }
    },
    showAddUserDa() {
      this.info = this.$options.data().info
      this.modal = false
    },
    AddServiceFileModal() {
      this.modal = true
    },
    onSubmit() {
      this.query.pageNumber = 1;
      this.getServiceList()
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.getServiceList()
    },
    handleCurrentChange(val) {
      this.query.pageNumber = val;
      this.getServiceList()
    },
    async getServiceList() {
      const vm = this;
      let responese = await serviceFileList(vm.query)
      if (responese.code === '20000') {
        vm.data = responese.data.list;
        vm.total  = responese.data.total
      }
    }
  }
}
</script>